<template>
  <BasePage title="学院确认记录" description="查看学院确认的上报记录">
    <!-- 筛选条件 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
      <div class="grid grid-cols-2 gap-3">
        <div>
          <label class="block text-sm text-gray-600 mb-1">确认状态</label>
          <select v-model="filters.status" class="w-full p-2 border border-gray-300 rounded-md text-sm">
            <option value="">全部状态</option>
            <option value="confirmed">已确认</option>
            <option value="pending">待确认</option>
          </select>
        </div>
        <div>
          <label class="block text-sm text-gray-600 mb-1">上报日期</label>
          <input 
            type="date" 
            v-model="filters.date" 
            class="w-full p-2 border border-gray-300 rounded-md text-sm"
          >
        </div>
      </div>
      <div class="mt-4">
        <button 
          @click="applyFilters" 
          class="w-full py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors"
        >
          查询
        </button>
      </div>
    </div>
    
    <!-- 确认统计 -->
    <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
      <h3 class="text-base font-medium text-gray-800 mb-3">确认统计</h3>
      <div class="grid grid-cols-3 gap-3">
        <div class="bg-blue-50 p-3 rounded-lg text-center">
          <div class="text-blue-500 font-medium">{{ stats.total }}</div>
          <div class="text-xs text-gray-500 mt-1">总记录数</div>
        </div>
        <div class="bg-green-50 p-3 rounded-lg text-center">
          <div class="text-green-500 font-medium">{{ stats.confirmed }}</div>
          <div class="text-xs text-gray-500 mt-1">已确认</div>
        </div>
        <div class="bg-yellow-50 p-3 rounded-lg text-center">
          <div class="text-yellow-500 font-medium">{{ stats.pending }}</div>
          <div class="text-xs text-gray-500 mt-1">待确认</div>
        </div>
      </div>
    </div>
    
    <!-- 记录列表 -->
    <BaseList 
      :items="confirmRecords" 
      :loading="loading" 
      :has-more="hasMore"
      @load-more="loadMore"
      empty-text="暂无确认记录"
    >
      <template #item="{ item }">
        <div class="bg-white rounded-lg shadow-sm p-4 mb-3">
          <div class="flex justify-between items-start">
            <div>
              <div class="font-medium text-gray-800">{{ item.date }} 上报确认</div>
              <div class="text-sm text-gray-500 mt-1">{{ item.department }}</div>
            </div>
            <div :class="[item.status === 'confirmed' ? 'bg-green-100 text-green-600' : 'bg-yellow-100 text-yellow-600', 'px-2 py-1 rounded-full text-xs']">
              {{ item.status === 'confirmed' ? '已确认' : '待确认' }}
            </div>
          </div>
          
          <div class="mt-3 text-sm text-gray-600">
            <div class="flex justify-between py-1 border-b border-gray-100">
              <span>辅导员数量</span>
              <span>{{ item.counselorCount }}</span>
            </div>
            <div class="flex justify-between py-1 border-b border-gray-100">
              <span>已上报数量</span>
              <span>{{ item.reportedCount }}</span>
            </div>
            <div class="flex justify-between py-1 border-b border-gray-100">
              <span>未上报数量</span>
              <span>{{ item.unreportedCount }}</span>
            </div>
            <div class="flex justify-between py-1">
              <span>确认时间</span>
              <span>{{ item.status === 'confirmed' ? item.confirmTime : '-' }}</span>
            </div>
          </div>
          
          <div v-if="item.status === 'pending'" class="mt-3">
            <button 
              @click="confirmRecord(item)" 
              class="w-full py-1.5 bg-green-500 text-white rounded-lg text-sm hover:bg-green-600 transition-colors"
            >
              确认上报
            </button>
          </div>
        </div>
      </template>
    </BaseList>
    
    <!-- 确认弹窗 -->
    <div v-if="showConfirmDialog" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg max-w-sm w-full p-5">
        <h3 class="text-lg font-medium text-gray-800 mb-3">确认上报</h3>
        <p class="text-gray-600 mb-4">您确定要确认 {{ selectedRecord?.date }} 的上报记录吗？</p>
        <div class="flex space-x-3">
          <button 
            @click="confirmSubmit" 
            class="flex-1 py-2 bg-green-500 text-white rounded-lg font-medium hover:bg-green-600 transition-colors"
          >
            确认
          </button>
          <button 
            @click="cancelConfirm" 
            class="flex-1 py-2 bg-gray-100 text-gray-700 rounded-lg font-medium hover:bg-gray-200 transition-colors"
          >
            取消
          </button>
        </div>
      </div>
    </div>
  </BasePage>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import BasePage from '../../components/BasePage.vue';
import BaseList from '../../components/BaseList.vue';

// 筛选条件
const filters = ref({
  status: '',
  date: ''
});

// 记录列表
const confirmRecords = ref([]);
const loading = ref(false);
const hasMore = ref(true);
const page = ref(1);

// 确认弹窗
const showConfirmDialog = ref(false);
const selectedRecord = ref(null);

// 统计数据
const stats = computed(() => {
  const total = confirmRecords.value.length;
  const confirmed = confirmRecords.value.filter(record => record.status === 'confirmed').length;
  return {
    total,
    confirmed,
    pending: total - confirmed
  };
});

// 加载记录
const loadRecords = async () => {
  loading.value = true;
  
  // 模拟API请求
  await new Promise(resolve => setTimeout(resolve, 1000));
  
  // 模拟数据
  const mockData = [
    {
      id: '1',
      date: '2023-05-15',
      department: '计算机科学与技术学院',
      status: 'confirmed',
      counselorCount: 12,
      reportedCount: 12,
      unreportedCount: 0,
      confirmTime: '17:30'
    },
    {
      id: '2',
      date: '2023-05-14',
      department: '计算机科学与技术学院',
      status: 'confirmed',
      counselorCount: 12,
      reportedCount: 10,
      unreportedCount: 2,
      confirmTime: '18:15'
    },
    {
      id: '3',
      date: '2023-05-13',
      department: '计算机科学与技术学院',
      status: 'confirmed',
      counselorCount: 12,
      reportedCount: 11,
      unreportedCount: 1,
      confirmTime: '17:45'
    },
    {
      id: '4',
      date: '2023-05-16',
      department: '计算机科学与技术学院',
      status: 'pending',
      counselorCount: 12,
      reportedCount: 8,
      unreportedCount: 4,
      confirmTime: ''
    }
  ];
  
  // 应用筛选条件
  let filteredData = [...mockData];
  
  if (filters.value.status) {
    filteredData = filteredData.filter(record => record.status === filters.value.status);
  }
  
  if (filters.value.date) {
    filteredData = filteredData.filter(record => record.date === filters.value.date);
  }
  
  // 添加到记录列表
  if (page.value === 1) {
    confirmRecords.value = filteredData;
  } else {
    confirmRecords.value = [...confirmRecords.value, ...filteredData];
  }
  
  // 更新加载状态
  loading.value = false;
  hasMore.value = page.value < 3; // 模拟只有3页数据
};

// 应用筛选条件
const applyFilters = () => {
  page.value = 1;
  loadRecords();
};

// 加载更多
const loadMore = () => {
  if (loading.value || !hasMore.value) return;
  page.value++;
  loadRecords();
};

// 确认记录
const confirmRecord = (record) => {
  selectedRecord.value = record;
  showConfirmDialog.value = true;
};

// 确认提交
const confirmSubmit = async () => {
  // 模拟API请求
  await new Promise(resolve => setTimeout(resolve, 800));
  
  // 更新记录状态
  const index = confirmRecords.value.findIndex(r => r.id === selectedRecord.value.id);
  if (index !== -1) {
    confirmRecords.value[index].status = 'confirmed';
    confirmRecords.value[index].confirmTime = new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
  }
  
  // 关闭弹窗
  showConfirmDialog.value = false;
  selectedRecord.value = null;
  
  // 在实际应用中，这里会发送请求到后端确认记录
  console.log('已确认记录:', selectedRecord.value);
};

// 取消确认
const cancelConfirm = () => {
  showConfirmDialog.value = false;
  selectedRecord.value = null;
};

// 初始加载
onMounted(() => {
  loadRecords();
});
</script>